<!-- This form will be progressively enhanced by the Fluid Uploader component. -->
<form action="#" method="post" enctype="multipart/form-data"
	class="fl-uploader fl-progEnhance-basic">
	<p>Browse to upload a file.</p>
	<input name="fileData" type="file" />
	<div><input type="submit" value="Save" /></div>
</form>

<!-- This is the markup for the Fluid Uploader component itself. -->
<form action="#" class="flc-uploader fl-uploader fl-progEnhance-enhanced"
	method="get" enctype="multipart/form-data"><!-- The file queue -->
	<div class="fl-uploader-queue-wrapper"><!-- Top of the queue -->
		<div class="fl-uploader-queue-header">
			<table cellspacing="0" cellpadding="0"
				summary="Headers for the file queue.">
				<caption>File Upload Queue:</caption>
			
				<tr>
					<th scope="col" class="fl-uploader-file-name">File Name</th>
					<th scope="col" class="fl-uploader-file-size">Size&nbsp;&nbsp;</th>
					<th scope="col" class="fl-uploader-file-actions">&nbsp;</th>
				</tr>
			
			</table>
		</div>
	
	<!-- Scrollable view -->
	<div class="flc-scroller fl-scroller">
	<div class="fl-scroller-inner">
	<table cellspacing="0" class="flc-uploader-queue fl-uploader-queue"
		summary="Queue of files to upload.">
		<tbody>
			<!-- Rows will be rendered in here. -->
	
			<!-- Template markup for the file queue rows -->
			<tr
				class="flc-uploader-file-tmplt flc-uploader-file fl-uploader-hidden-templates">
				<th class="flc-uploader-file-name fl-uploader-file-name" scope="row">File
				Name Placeholder</th>
				<td class="flc-uploader-file-size fl-uploader-file-size">0 KB</td>
				<td class="fl-uploader-file-actions">
				<button type="button"
					class="flc-uploader-file-action fl-uploader-file-action"
					title="Remove File" tabindex="1"><span
					class="fl-uploader-button-text fl-uploader-hidden">Remove file from
				queue</span></button>
				</td>
			</tr>
	
			<!-- Template for the file error info rows -->
			<tr
				class="flc-uploader-file-error-tmplt fl-uploader-file-error fl-uploader-hidden-templates">
				<td colspan="3" class="flc-uploader-file-error"></td>
			</tr>
		</tbody>
	</table>
	<div
		class="flc-uploader-file-progressor-tmplt fl-uploader-file-progress"><span
		class="fl-uploader-file-progress-text fl-uploader-hidden">76%</span></div>
	</div>
	</div>
	
	<div
		class="flc-uploader-browse-instructions fl-uploader-browse-instructions">
	Choose <em>Browse files</em> to add files to the queue</div>
	
	<!-- Foot of the queue -->
	<div class="flc-uploader-queue-footer fl-uploader-queue-footer">
	<table cellspacing="0" cellpadding="0" summary="Status of file queue.">
	
		<tr>
			<td class="flc-uploader-total-progress-text">Total: <span
				class="fl-uploader-totalFiles">0</span> files (<span
				class="fl-uploader-totalBytes">0 KB</span>)</td>
			<td class=".fl-uploader-footer-buttons" align="right"><a href="#"
				class="flc-uploader-button-browse fl-uploader-browse">Browse files</a>
			</td>
		</tr>
	
	</table>
	<div class="flc-uploader-total-progress fl-uploader-total-progress-okay">&nbsp;</div>
	</div>
	</div>
	
	<!-- Action buttons -->
	<div class="fl-uploader-btns">
	<button type="button"
		class="flc-uploader-button-pause fl-uploader-pause fl-uploader-hidden">Stop
	Upload</button>
	<button type="button"
		class="flc-uploader-button-upload fl-uploader-upload fl-uploader-button-default fl-uploader-dim"
		disabled="disabled">Upload</button>
	</div>
</form>
		
 <script type="text/javascript">
    var myUpload = fluid.progressiveEnhanceableUploader(".flc-uploader", ".fl-progEnhance-basic", {
                    uploadManager: {
            		    type: "fluid.swfUploadManager",

            		    options: {
            		       // Set the uploadURL to the URL for posting files to your server.
            		       uploadURL: "<?php echo $this->url ( array ('module' => 'filemanager', 'controller' => 'file', 'action' => 'performupload' ), 'default', true );?>",

            		       // Add post parameters
            		       postParams: {parent: <?php echo $this->catId; if ($this->connectTo) {echo ", connectTo: ".$this->connectTo;} ?> },

            		       // This option points to the location of the SWFUpload Flash object that ships with Fluid Infusion.
            		       flashURL: "<?php echo Zend_Controller_Front::getInstance()->getBaseUrl();?>/js/infusion/lib/swfupload/flash/swfupload.swf"
            			}
            		},

                    listeners: {
                        onFileSuccess: function (file, serverData){
                            // example assumes that the server code passes the new image URL in the serverData
                            //jQuery('#image-space').append('<img src="' + serverData + '" alt="' + file.name +'" />');
                        },

                        
                        afterUploadComplete: function () {

                            // first check to see if the file queue is empty and there haven't been any errors
                            if (myUpload.uploadManager.queue.getReadyFiles().length === 0 && myUpload.uploadManager.queue.getErroredFiles().length === 0) {
                                window.parent.afterUpload();
                            }
                        }
                        
                    },

                    decorators: [{
                        type: "fluid.swfUploadSetupDecorator",
                        options: {
                            // This option points to the location of the Browse Files button used with Flash 10 clients.
                            flashButtonImageURL: "<?php echo Zend_Controller_Front::getInstance()->getBaseUrl();?>/js/infusion/components/uploader/images/browse.png"
                        }
                    }]
                });
                
</script>
